﻿@using WebApp.Controllers
@using WebApp.Extensions
@model Dto.ApiResponses.ContactResponses.ContactDetailResponse
@{
    ViewBag.CurrentPage = WebApp.Common.PageSetting.ContactShowPageSetting;
}

@{ var sectionId = (Request.IsAjaxRequest() ? "Ajax" : "View") + "_Contact_Show_" + Model.Detail.Id; }

@section Scripts{
    <script type="text/javascript">
        require(['Contact/Show', 'Util'], function (api, util) {
            var model = util.toJS(@(Html.ToJson(Model)));
            $(function () { api.exec('@sectionId', model); });
        });
    </script>
}

@section QuickLinks{
    <a class="btn btn-primary btn-lg" href="@(Url.Action<ContactController>(x => x.Edit(Guid.Empty), new { id = Model.Detail.Id }))">Edit</a>
    <!-- Button trigger modal -->
}

<div class="container" data-bind="stopbinding: true">
    <section id="@sectionId">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6">
                <legend class="h3">General Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Photo</label>
                            <div><canvas id="imgCanvas" width="150" height="187"></canvas></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Name</label>
                            <div class="text-info" data-bind="text : name"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Title Name</label>
                            <div class="text-info" data-bind="text : titleName"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>First Name</label>
                            <div class="text-info" data-bind="text : firstName"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Last Name</label>
                            <div class="text-info" data-bind="text : lastName"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6">
                <legend class="h3">Contact Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Email</label>
                            <div class="text-info" data-bind="text : email"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Phone</label>
                            <div class="text-info" data-bind="text : phone"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Mobile</label>
                            <div class="text-info" data-bind="text : mobile"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6">
                <legend class="h3">Other Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Company Name</label>
                            <div class="text-info" data-bind="text : CompanyName"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Designation</label>
                            <div class="text-info" data-bind="text : designation"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label>Description</label>
                            <div class="text-info" data-bind="text : description"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if (!Request.IsAjaxRequest())
    {
        Html.RenderPartial("_ShowWithAudit", Model);
    }

</div>